<template>
	<view class="sheet">
		<view class="header">
			<view class="header-left">
				<image :src="sheetall.playlist.coverImgUrl" lazy-load="ture"></image>
			</view>
			<view class="header-right">
				<view class="sh-name">
					{{ sheetall.playlist.name }}
				</view>
				<view class="sh-description">
					{{ sheetall.playlist.description }}
				</view>
			</view>
		</view>
		<view class="sh-list">
			<view class="songitem" v-for="(item, index) in shlist" :key="index" @click="song(item.id)">
				<view class="left">
					<image class="img" :src="item.al.picUrl" scaleToFill lazy-load="ture"></image>
				</view>
				<view class="center">
					<view class="title">{{ item.name }}</view>
					<view class="info">{{ item.al.name }} </view>
				</view>
				<view class="right">
					播放
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '歌单',
				shlist:[],
				sheetall:null
			}
		},
		methods: {
			getinfolist(id){
				// console.log(id)
				uni.request({
					url:`http://134.175.83.178:3000/playlist/detail?id=${id}`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.shlist = data.playlist.tracks
						this.sheetall = data
					}
				})
			},
			song(id){
				// console.log(id)
				uni.navigateTo({
					url: `/pages/song/song?id=${id}`
				});
			}
		},
		onLoad(res) {
			uni.setNavigationBarTitle({
				title: this.navTitle
			})
			this.getinfolist(res.id)
		}
	}
</script>

<style>
.header{
	width: 100%;
	height: 30vh;
	display: flex;
	padding-left: 20rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.header-left{
	width: 40%;
}
.header-left image{
	width: 100%;
	height: 30vh;
}
.header-right{
	width: 60%;
	font-size: 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0 20rpx;
}
.sh-description{
	font-size: 24rpx;
	color: #555;
	overflow: hidden;
}
.songitem{
	/* border-bottom: 1rpx solid #C8C7CC; */
	margin-bottom: 20rpx;
	cursor: pointer;
	display: flex;
	justify-content: space-around;
}
.songitem .searchWord{
	font-size: 36rpx;
}
.songitem .content{
	font-size: 26rpx;
	color: #2C405A;
}
.searchhot .songitem{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx 20rpx 20rpx;
}
.left{
	width: 20%;
	height: 100%;
}
.left .img{
	width: 100%;
	height: 80rpx;
	
}
.center{
	width: 60%;
}
.info{
	font-size: 26rpx;
	color: #555;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.right{
	float: right;
}
</style>
